<template>
	<div class="moble_home">
		<div class="banner">
			<el-carousel :interval="5000" arrow="nerver" height="10rem">
				<el-carousel-item v-for="item in bannerList" :key="item.id">
					<img :src="`http://127.0.0.1/api/public/showimg/${item.picture}`" />
				</el-carousel-item>
			</el-carousel>
		</div>
		<MobileList proptitle="热门推荐" :proplist='hotlist'></MobileList>
		<MobileList proptitle="新书上市" :proplist='newlist'></MobileList>
	</div>
</template>

<script>
	import MobileList from '@/components/mobile/home/MobileList.vue'
	export default {
		name: 'MobileHome',
		components: {
			MobileList
		},
		data() {
			return {
				bannerList: [],
				hotlist: [],
				newlist: []
			}
		},
		methods: {
			HotBanner() {
				this.bannerList.sort((a1, a2) => {
					return a2.hot - a1.hot
				})
				//forEach/for  in/for of 都是可以在需要限制
				let arr = []
				this.bannerList.map((item, i) => {
					if (i < 4) {
						arr.push(item)
					}
				})
				return arr
			},
			getPic() {
				this.$get("/api/public/findHot/1/5").then((resp) => {
					this.bannerList = resp.data.data
					console.log(this.bannerList);
				})
			},
			getNew() {
				this.$get("/api/adm/hot/findAll").then((resp) => {
					this.newlist = resp.data.data
					console.log( this.newlist);
				})
			}
		},
		mounted() {
			this.getPic();
			this.HotBanner();
			this.getNew();
			this.$get("/api/public/findPageBook/1/20/0").then((resp) => {
				this.hotlist = resp.data.data.books
				console.log( this.hotlist);
			})
		}
	}
</script>

<style scoped>
	.moble_home {
		width: 100%;
		position: relative;
		background-color: #f5d5a0;
		top: 56px;
	}

	.moble_home .banner {
		width: 100%;
		height: 10rem;
		background-color: orange;
	}

	.moble_home .banner img {
		width: 100%;
		height: 100%;
	}

	.moble_home.banner .el-carousel /deep/.el-carousel_button {
		height: 5px !important;
	}

	.moble_home.banner .el-carousel /deep/ .is-active {
		background-color: #0874fe !important;
	}
</style>